<script setup>
import { computed, ref, reactive, onMounted } from 'vue'
import { getListService, passService, refuseService } from '@/api/leaveRequest'
import { ElMessage } from 'element-plus'

const tableData = reactive([])

const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase()) || data.department.toLowerCase().includes(search.value.toLowerCase())
    )
)

const pageNum = ref(1)
const total = ref(20)
const pageSize = ref(10)

async function getList() {
    tableData.length = 0
    let result = await getListService(pageNum.value, pageSize.value)
    total.value = result.data.total
    // console.log(result.data)
    for (let i = 0; i < result.data.items.length; i++) {
        tableData.push(result.data.items[i])
    }
}
getList()

const onSizeChange = (size) => {
    pageSize.value = size
    getList()
}
const onCurrentChange = (num) => {
    pageNum.value = num
    getList()
}

const pass = async (id) => {
    await passService(id)
    ElMessage.success("审核成功：已通过该请假申请")
    getList()
}

const refuse = async (id) => {
    await refuseService(id)
    ElMessage.warning("审核成功：已驳回该请假申请")
    getList()
}

</script>



<template>
    <div style="width: 100%;padding:25px;">
        <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
            <el-input v-model="search" placeholder="搜索相关信息" style="width: 200px;margin-left:100vh;" />
        </div>
        <el-table :data="filterTableData" border stripe style="min-width:calc(100vh - 200px)">
            <el-table-column label="ID" prop="id" sortable />
            <el-table-column label="工号" prop="workerId" sortable />
            <el-table-column label="手机号" prop="phoneNumber" />
            <el-table-column label="部门" prop="department" />
            <el-table-column label="描述" prop="detail" />
            <el-table-column label="起始时间" prop="start" />
            <el-table-column label="终止时间" prop="end" />
            <el-table-column label="状态" prop="status">
                <template #default="scope">
                    <span>
                        <i v-if="scope.row.status === 0" style="color: gray;">待审核</i>
                        <i v-if="scope.row.status === 1" style="color: lightgreen;">已通过</i>
                        <i v-if="scope.row.status === 2" style="color: brown;">已驳回</i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width='200px'>
                <template #default="scope">
                    <template v-if="scope.row.status === 0">
                        <!-- <el-button size="small" @click="pass(scope.row.id)">通过</el-button> -->
                        <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
                            icon-color="red" title="确认要通过此条申请吗？" @confirm="pass(scope.row.id)">
                            <template #reference>
                                <el-button size="small" type="success" :disabled="!scope.row.status === 0">通过</el-button>
                            </template>
                        </el-popconfirm>
                        <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
                            icon-color="red" title="确认要驳回此条申请吗？" @confirm="refuse(scope.row.id)">
                            <template #reference>
                                <el-button size="small" type="danger" :disabled="!scope.row.status === 0">驳回</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin: 10px 0;">
            <el-pagination v-model:current-page="pageNum" v-model:page-size='pageSize' :page-sizes="[5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="onSizeChange"
                @current-change="onCurrentChange" />
        </div>
    </div>


</template>
